<template>
  <d2-container>
    <el-form :inline="true" :model="searchForm">
      <el-form-item label="养殖池">
       <el-select size="small" v-model="searchForm.culturePondId" placeholder="请选择养殖池">
          <el-option v-for="culturePond in culturePonds" :key="culturePond.id" :label="culturePond.id + ':' + culturePond.cpName" :value="culturePond.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="settingsList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="12">
    <el-col :span="8">
      <el-card shadow="always">
        <p  style="text-align: center;color:#409EFF;font-size:50px">
        {{monitorDataInfo.waterTemp ? monitorDataInfo.waterTemp : 0.0}}
        </p>
        <p  style="text-align: center;font-size:20px;">水温</p>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card shadow="always">
        <p  style="text-align: center;color:#409EFF;font-size:50px">
        {{monitorDataInfo.ph ? monitorDataInfo.ph : 0.0}}
        </p>
        <p  style="text-align: center;font-size:20px;">PH</p>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card shadow="always">
        <p  style="text-align: center;color:#409EFF;font-size:50px">
        {{monitorDataInfo.salinity ? monitorDataInfo.salinity : 0.0}}
        </p>
        <p  style="text-align: center;font-size:20px;">盐度</p>
      </el-card>
    </el-col>
  </el-row>
    <el-row style="margin-top:20px"  :gutter="12">
    <el-col :span="8">
      <el-card shadow="always">
        <p  style="text-align: center;color:#409EFF;font-size:50px">
        {{monitorDataInfo.dissolvedOxygen ? monitorDataInfo.dissolvedOxygen : 0.0}}
        </p>
        <p  style="text-align: center;font-size:20px;">溶氧</p>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card shadow="always">
        <p  style="text-align: center;color:#409EFF;font-size:50px">
        {{monitorDataInfo.ammonia ? monitorDataInfo.ammonia : 0.0}}
        </p>
        <p  style="text-align: center;font-size:20px;">氨氮</p>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card shadow="always">
        <p  style="text-align: center;color:#409EFF;font-size:50px">
        {{monitorDataInfo.cod ? monitorDataInfo.cod : 0.0}}
        </p>
        <p  style="text-align: center;font-size:20px;">COD</p>
      </el-card>
    </el-col>
  </el-row>
  <el-row style="margin-top:20px;background-color:#EBEEF5;">
    <el-col style="text-align: center;" :span="24">
      <video height="500px" :src="'test'" controls></video>
    </el-col>
  </el-row>
  </d2-container>
</template>

<script>
import dayjs from 'dayjs'
import api from "@/api";
export default {
  data () {
    return {
      monitorDataInfo:{
      },
      culturePonds:[],
      searchForm: {
        culturePondId:"",
        settingKey: '',
        settingValue: '',
        settingDesc: ''
      },
      tableLoading: false,
      currentPageInfo: {
        current: 1,
        size: 10,
        total: 0
      },
      pageSizeOptions: [5, 10, 20, 40],
      editLoading: false,
      formLabelWidth: "120px",
      form: {},
      settings: [],
      currentTag: null,
      dialogVisible: false,
      rules: {
        settingKey: [
          { required: true, message: "请输入配置KEY", trigger: "blur" },
          { min: 0, max: 32, message: "长度在 0 到 32 个字符", trigger: "blur" }
        ],
        settingValue: [
          { required: true, message: "请输入配置VALUE", trigger: "blur" },
          { min: 0, max: 32, message: "长度在 0 到 32 个字符", trigger: "blur" }
        ],
        settingDesc: [
          {
            min: 0,
            max: 256,
            message: "长度在 0 到 256 个字符",
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {
    dialogTitle () {
      return this.currentTag == null
        ? "新增配置"
        : "编辑配置 - " + this.currentTag.settingKey;
    },
    isNew () {
      return this.currentTag == null;
    }
  },
  methods: {
   async culturePondsQuery () {
      this.tableLoading = true;
      var data = await api.service.get("/culturePond");
      this.culturePonds = data;
      this.searchForm.culturePondId = data[0].id
    },
    handleSizeChange (val) {
      this.currentPageInfo.size = val;
      this.currentPageInfo.current = 1;
      this.settingsList();
    },
    handleCurrentChange (val) {
      this.currentPageInfo.current = val;
      this.settingsList();
    },
    showDialog (currentTag) {
      this.currentTag = currentTag;
      this.form = currentTag ? {
        ...JSON.parse(JSON.stringify(currentTag))
      } : {};
      console.log('this.form', this.form.timeRange)
      this.dialogVisible = true;
    },
    deleteTag (tag) {
      this.$confirm('确定要删除"' + tag.de + '"配置吗？', "删除配置", {
        type: "warning"
      }).then(async _ => {
        var res = await api.service.delete("/backManage/settings", {
          params: {
            ids: tag.id
          }
        }).catch(function(error) { });
        if (res) {
          this.$message({
            message: "删除成功！",
            type: "success"
          });
          this.settingsList();
        }
      });
    },
    submit () {
      this.$refs.editForm.validate(async valid => {
        if (valid) {
          this.editLoading = true;
          var res = await api.service.post("/backManage/setting", this.form).catch(function(error) { });
          if (res) {
            this.$message({
              message: this.isNew ? "新增成功！" : "修改成功！",
              type: "success"
            });
            this.dialogVisible = false;
            this.settingsList();
          }
          this.editLoading = false;
        }
      });
    },
    async settingsList () {
      this.tableLoading = true;
      var data = await api.service.get("/monitorData/latest", {
        params: {
          culturePondId: this.searchForm.culturePondId
        }
      }).catch(function(error) { });
      console.log('data',data)
      this.monitorDataInfo = data
    }
  },
  async created () {
    await this.culturePondsQuery();
    this.settingsList()
  }
};
</script>
